<template>
  <el-scrollbar>
    <div class="relative">
      <CanvasAcross2 :sectionId="sectionId" />
      <CanvasCurve :sectionId="sectionId" />
      <CanvasCurve2 :sectionId="sectionId" />
      <CanvasSpan2 :sectionId="sectionId" />
      <CanvasGrid2 :sectionId="sectionId" />
      <CanvasTower2 :sectionId="sectionId" />
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">
import CanvasAcross2 from '@/components/Canvas/CanvasAcross2.vue'
import CanvasCurve from '@/components/Canvas/CanvasCurve.vue'
import CanvasCurve2 from '@/components/Canvas/CanvasCurve2.vue'
import CanvasGrid2 from '@/components/Canvas/CanvasGrid2.vue'
import CanvasSpan2 from '@/components/Canvas/CanvasSpan2.vue'
import CanvasTower2 from '@/components/Canvas/CanvasTower2.vue'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const sectionId = ref(+route.params.sectionId)
</script>
